@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义 Tailwind 组件 */
@layer components {
  .btn-primary {
    @apply bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded transition-colors;
  }

  .btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded transition-colors;
  }

  .card {
    @apply bg-white rounded-lg shadow-md border border-gray-200;
  }

  .input-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
  }
}

/* 与 Element UI 兼容的样式调整 */
@layer base {
  * {
    @apply box-border;
  }

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  #app {
    height: 100%;
    overflow: hidden;
  }

  /* 全局滚动条样式 */
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
  }
}
